<template>
  <view class="suggest" v-if="!isShow" :class="{'leave':fade}">
    <!-- 头部 -->
    <view class="header">
      <view class="title">
        {{title}}
        <uni-icons type="right"></uni-icons>
      </view>
      <uni-icons @click="open" custom-prefix="iconfont" type="icon-gengduo" size="16"></uni-icons>
    </view>
    <!-- 内容 -->
    <slot></slot>
  </view>
  <!-- 底部弹出 -->
  <uni-popup ref="popup" type="bottom" background-color="#fff">
    <view class="popContent">
      <view class="title">
        {{title}}
      </view>
      <view class="content">
        <view class="select-item">
          <uni-icons size="22" type="hand-up"></uni-icons>
          优先推荐
        </view>
        <view @click="close" class="select-item">
          <uni-icons size="22" type="trash"></uni-icons>
          减少推荐
        </view>
        <view class="select-item">
          <uni-icons size="22" type="reload"></uni-icons>
          刷新
        </view>
      </view>
    </view>
  </uni-popup>
</template>
<script setup>
  import {
    ref
  } from "vue";
  defineProps({
    title: {
      type: String,
      default: '标题'
    }
  })
  
  const popup = ref()
  const open = () => {
    popup.value.open()
  }
  const isShow = ref(false)
  const fade = ref(false)
  const close = () => {
    popup.value.close()
    fade.value = true
    setTimeout(()=>{
    isShow.value = true
    },500)
  }
</script>
<script>
  export default {
    name: 'my-card'
  }
</script>
<style lang="less" scoped>
  .suggest {
    // margin: 15rpx 0;
    padding-bottom: 15rpx;
    border-bottom: 1px solid #efefef;
    opacity: 1; 
    transition: all 0.5s ease-in-out;
    max-height: 1000px;
    &.leave{
      opacity: 0;
      max-height: 0;
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;

      .title {
        font-weight: bold;
        font-size: 32rpx
      }
    }
  }

  .popContent {
    padding: 0 20rpx 20rpx;
    border-radius: 15rpx;


    .title {
      font-size: 14px;
      line-height: 70rpx;
      color: #797979;
    }

    .content {
      border-top: 1px solid #efefef;
      font-size: 14px;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .select-item {
        padding: 15rpx 0;
        display: flex;
        align-items: center;
      }
    }
  }
  
  

</style>
